<template>
  <div class="con">
    <div class="logo">
      <span></span>
      <img src="../../assets/topbar.png"/>
    </div>
    <div class="user_phone">
      <van-cell-group>
        <van-field name='phone' v-model='tel' autocomplete="off" placeholder="请输入手机号" clearable/>
      </van-cell-group>
    </div>
    <div class="ver">
      <van-field type='password' name='sms' v-model="password" autocomplete="off" center clearable placeholder="请输入密码" :rules="[{ pattern, message: '请输入正确内容' }]">
        <template v-if="status==true? verify():''"></template>
        <template #button>
          <van-button size="small" type="danger" @click="validate">登录验证</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field , Button,Cell, CellGroup } from "vant";
import {mapGetters} from 'vuex'
Vue.use(Field);
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  data() {
    return {
      tel: "",
      password:'',
      state:null,
      pattern: /\d{6}/,
    };
  },
  computed:{
    ...mapGetters(['status']),
  },
  watch:{

  },
  created() {
    this.$bus.$emit("hideMenu", false);
  },
  beforeDestroy() {
    this.$bus.$emit("hideMenu", true);
  },
  methods:{
    // send(){
    //   // console.log(this.formValue);
    //   const phone=this.tel
    //   this.$store.dispatch('getCaptcah',{phone})
    // },
    validate(){
      const phone=this.tel
      const password=this.password
      this.$store.dispatch('verify',{phone,password})
      // console.log(phone,sms);
    },
    verify(){
      this.$router.push({path:'/find'})
      // console.log(11111);
    }
  }
};
</script>

<style lang="scss">
.con {
  width: 100%;
  height: 675px;
  background: #d9392d;
  overflow: hidden;
  .logo {
    width: 100px;
    height: 100px;
    margin: 150px auto;
    border: 2px solid #da382b;
    border-radius: 50%;
    overflow: hidden;
    img {
      transform: scale(2);
      position: relative;
      top: 90px;
      left: 140px;
    }
  }
  .user_phone {
    width: 280px;
    height: 45px;
    border-radius: 15px;
    // background: #fff;
    margin: auto;
    /deep/.van-cell-group {
      border-radius: 20px;
      border: none;
      /deep/.van-cell{
        border-radius: 20px;
      }
    }
  }
  .ver {
    width: 280px;
    height: 45px;
    margin: 20px auto;
    /deep/.van-cell {
      border-radius: 20px;
    }
  }
}
</style>
